<template>
    <v-chart :class="$style.chart" :option="option" autoresize />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { use } from 'echarts/core';
    import { CanvasRenderer } from 'echarts/renderers';
    import { LineChart } from 'echarts/charts';
    import {
        TitleComponent,
        TooltipComponent,
        LegendComponent,
        GridComponent,
    } from 'echarts/components';
    import VChart from 'vue-echarts';
    use([
        CanvasRenderer,
        LineChart,
        TitleComponent,
        TooltipComponent,
        LegendComponent,
        GridComponent
    ]);

    const props = defineProps<{
        times:any;
        data:any
    }>()

    console.log(props.data)

    const common = {
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            top : '30px',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },

        yAxis: [
            {
            type: 'value'
            }
        ],

        xAxis : {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            }
        },

        series : {
            type: 'line',
        }
    }

    const option = ref<any>({
        tooltip : common.tooltip,
        grid : common.grid,
        yAxis : common.yAxis,
        xAxis: [
            {
                
                data: props.times,
                ...common.xAxis,
            }
        ],
        series: [
            {
            name: props.data.name,
            ...common.series,
                data: props.data.data
            }
        ]
    })

    console.log(option.value)
</script>

<style lang="scss" module>
    .chart{
        height: 300px;
    }
</style>